<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>搭车列表</title>
<link href="img/css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.json.min.js"></script>  
<script type="text/javascript" src="js/jsonMsg.js"></script>  
<script type="text/javascript" src="js/QueryStringParser.js"></script>
</head>

<body>
<div class="tab3">
     <div class="tabstyle2_d"><a href="javascript:void(0);"  onClick="handleTab(1);">最近搭车</a></div>
     <div class="tabstyle2 line_left"><a href="javascript:void(0);"  onClick="handleTab(2);">历史搭车</a></div>
</div>
<div class="sort">
     <div class="sortstyle2"><span class="sortstyle_yellow2"><a href="javascript:void(0);" onClick="handleOrder(1);">我的请求</a></span></div>
     <div class="sortstyle2"><span><a href="javascript:void(0);" onClick="handleOrder(2);">别人的请求</a></span></div>
</div>
<!--list group-->
<div id="contain">
</div>
<!--End of list group-->
<div class="bottom_btn">
     <a href="javascript:void(0);" onClick="addTrip();"><p class="ico_group4"><i class="iconfont img">&#xe600;</i>增加搭车</p></a>
</div>

<script type="text/javascript">
var latLon = "";
var openId = queryString.getParam("openid");
var innerContain = "";  


var currentListType = 1;

var currentOrderType  = 1;

function addTrip(){
	window.location.href="add_car.html?openid="+	openId;
}

function getItem(url, title, senderImage, receiverImage) {
	var content = "";
	content += '<a href="'+url+'">';
	content += '<div class="list_group">';
	content += '<img src="'+senderImage+'" width="50px;" height="50px;" class="user_pic">';
	content += '<div class="list_text">';
	content += '<div class="list_title_car">'+title+'</div>';
	content += '<div class="list_car_to">';
	content += '<p class="fl mr10"><img src="img/green_arrow.png"></p>';
	content += '<p class="fl"><img src="'+receiverImage+'" width="50px;" height="50px;"></p>';
	content += '</div>';
	content += '</div>';
	content += '</div>';
	content += '</a>';	
	return content;
}

function handleOrder(orderType){
	if(openId==null || openId==""){
		//return false;	
	}else{
		$('.sort').find('span').removeClass('sortstyle_yellow2');
		if(orderType==1){
			$('.sort').find('span:first').addClass('sortstyle_yellow2');
		}else if(orderType==2){
			$('.sort').children('div').eq(1).find('span').addClass('sortstyle_yellow2');
		}
		currentOrderType = orderType;
		sendRequest(currentListType,currentOrderType);

	}	
}

function handleTab(listType) {
	if (openId == null || openId == "") {
		return;
	}
	$('.tab3').find('div').removeClass('tabstyle2_d').removeClass('tabstyle2').removeClass('line_left');

	if (listType == 2) {
		$('.tab3').children('div').eq(1).addClass('tabstyle2_d');
		$('.tab3').find('div:first').addClass('tabstyle2').addClass('line_left');			
	} else {
		$('.tab3').children('div').eq(1).addClass('tabstyle2').addClass('line_left');
		$('.tab3').find('div:first').addClass('tabstyle2_d');			
	}

	currentListType = listType;
	currentOrderType = 1;
	handleOrder(currentOrderType);
}

function sendRequest(listType, orderType) {
	var dataStr = {   
	        ListType: listType,  
	        OrderType: orderType,  
	        Cursor: 0,  
	        Limit:15,
	        Direction:0
        };  
		
		var bodyStr = popBody('ListPickup',dataStr);
		var request = popRequest('ListPickup',openId,bodyStr);
		//调用了jquery.json 库  
		var encoded = $.toJSON( request );  
		var jsonStr = encoded;  

		$.ajax({  
		url : actionStr,  
		type : 'POST',  
		data : jsonStr,  
		dataType : 'json',  
		contentType : 'application/json',  
		success : function(data, status, xhr) {  
		//         Do Anything After get Return data 
		      $("#contain").html('');
			  if(data.portalResp.Data.pickups && data.portalResp.Data.pickups.length>0){	
				      var content = "";
				   
			          $.each(data.portalResp.Data.pickups, function(index, item){
			        	  var url = 'view_car.html?openid='+openId+'&pickupid='+item.PickupID;
			        	  var title = item.Title;
			        	  var senderImage = item.SenderPortrait;
			        	  var receiverImage = item.ReceiverPortrait;
			        	  content += getItem(url, title, senderImage, receiverImage);										
			          }); 
			          $("#contain").html(content);
		        }
		},  
		Error : function(xhr, error, exception) {  
		    // handle the error.    
		    alert(exception.toString());  
		}  
		});  	
}

$(document).ready(function(){
	handleOrder(currentListType,currentOrderType);
});


</script>

</body>
</html>
